<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>上传图片</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="shearphoto_common/layui/css/layui.css"  media="all">
  <script>
</script>
  		<script type="text/javascript" src="shearphoto_common/js/ShearPhoto.js"></script>
		<!--ShearPhoto的核心文件 截取，拖拽，HTML5切图，数据交互等都是由这个文件处理，全部由明哥先生汗水交织而成-->
		<script type="text/javascript" src="shearphoto_common/js/alloyimage.js"></script>
		<!--图片特效处理,他只负责特效，其他功能与这个文件完全无关，这个JS从腾讯AI文件  如你不要特效的话，顺带删除这个文件，在hendle.js设置关闭特效-->
		<script type="text/javascript" src="shearphoto_common/js/handle.js"></script>
		<!--设置和处理对象方法的JS文件，要修改设置，请进入这个文件-->
</head>
<body>
<div class="layui-main">
<div id="shearphoto_main">
			<!--效果开始.............如果你不要特效，可以直接删了........-->
			<div class="Effects" id="shearphoto_Effects" autocomplete="off">
				<strong class="EffectsStrong">截图效果</strong>
				<a href="javascript:;" StrEvent="原图" class="Aclick"><img src="shearphoto_common/images/Effects/e0.jpg" />原图</a>
				<a href="javascript:;" StrEvent="美肤"><img src="shearphoto_common/images/Effects/e1.jpg" />美肤效果</a>
				<a href="javascript:;" StrEvent="素描"><img src="shearphoto_common/images/Effects/e2.jpg" />素描效果</a>
				<a href="javascript:;" StrEvent="自然增强"><img src="shearphoto_common/images/Effects/e3.jpg" />自然增强</a>
				<a href="javascript:;" StrEvent="紫调"><img src="shearphoto_common/images/Effects/e4.jpg" />紫调效果</a>
				<a href="javascript:;" StrEvent="柔焦"><img src="shearphoto_common/images/Effects/e5.jpg" />柔焦效果</a>
				<a href="javascript:;" StrEvent="复古"><img src="shearphoto_common/images/Effects/e6.jpg" />复古效果</a>
				<a href="javascript:;" StrEvent="黑白"><img src="shearphoto_common/images/Effects/e7.jpg" />黑白效果</a>
				<a href="javascript:;" StrEvent="仿lomo"><img src="shearphoto_common/images/Effects/e8.jpg" />仿lomo</a>
				<a href="javascript:;" StrEvent="亮白增强"><img src="shearphoto_common/images/Effects/e9.jpg" />亮白增强</a>
				<a href="javascript:;" StrEvent="灰白"><img src="shearphoto_common/images/Effects/e10.jpg" />灰白效果</a>
				<a href="javascript:;" StrEvent="灰色"><img src="shearphoto_common/images/Effects/e11.jpg" />灰色效果</a>
				<a href="javascript:;" StrEvent="暖秋"><img src="shearphoto_common/images/Effects/e12.jpg" />暖秋效果</a>
				<a href="javascript:;" StrEvent="木雕"><img src="shearphoto_common/images/Effects/e13.jpg" />木雕效果</a>
				<a href="javascript:;" StrEvent="粗糙"><img src="shearphoto_common/images/Effects/e14.jpg" />粗糙效果</a>
			</div>
			<!--效果结束...........................如果你不要特效，可以直接删了.....................................................-->
			<!--primary范围开始-->
			<div class="primary">
				<!--main范围开始-->
				<div id="main">
					<div class="point">
					</div>
					<!--选择加载图片方式开始-->
					<div id="SelectBox">
						<form id="ShearPhotoForm" enctype="multipart/form-data" method="post" target="POSTiframe">
							<input name="shearphoto" type="hidden" value="我要传参数" autocomplete="off">
							<!--示例传参数到服务端，后端文件UPLOAD.php用$_POST['shearphoto']接收,注意：HTML5切图时，这个参数是不会传的-->
							<a href="javascript:;" id="selectImage">
								<input type="file" name="UpFile" autocomplete="off" />
							</a>
						</form>
					</div>
					<!--选择加载图片方式结束--->
					<div id="relat">
						<div id="black">
						</div>
						<div id="movebox">
							<div id="smallbox">
								<img src="shearphoto_common/images/default.gif" class="MoveImg" />
								<!--截框上的小图-->
							</div>
							<!--动态边框开始-->
							<i id="borderTop">
                                </i>

							<i id="borderLeft">
                                </i>

							<i id="borderRight">
                                </i>

							<i id="borderBottom">
                                </i>
							<!--动态边框结束-->
							<i id="BottomRight">
                                </i>
							<i id="TopRight">
                                </i>
							<i id="Bottomleft">
                                </i>
							<i id="Topleft">
                                </i>
							<i id="Topmiddle">
                                </i>
							<i id="leftmiddle">
                                </i>
							<i id="Rightmiddle">
                                </i>
							<i id="Bottommiddle">
                                </i>
						</div>
						<img src="shearphoto_common/images/default.gif" class="BigImg" />
						<!--MAIN上的大图-->
					</div>
				</div>
				<!--main范围结束-->
				<div style="clear: both"></div>
				<!--工具条开始-->
				<div id="Shearbar">
				<form class="layui-form" action="">
				  <div class="layui-form-item">
					<label class="layui-form-label">保存图片宽度</label>
					<div class="layui-input-block">
					  <input type="text" name="saveWidth" vlaue="200" required  lay-verify="required" placeholder="保存图片宽度" id="saveWidth" class="layui-input">
					</div>
				  </div>
				  <div class="layui-form-item">
					<label class="layui-form-label">选取框比例</label>
					<div class="layui-input-block">
					  <select name="changeFree"  lay-filter="changeFree" lay-verify="required"  id="changeFree">
						<option value="0">自由比例</option>
						<option value="1">1:1</option>
						<option value="2">2:1</option>
						<option value="4/3">4:3</option>
					  </select>
					</div>
				  </div>
				  <div class="layui-form-item layui-form-text">
					<a id="LeftRotate"  class="layui-btn layui-btn-normal" href="javascript:;">
						<em>
                        </em> 向左旋转
					</a>
					<em class="hint L">
                </em>
					<div class="ZoomDist" id="ZoomDist">
						<div id="Zoomcentre">
						</div>
						<div id="ZoomBar">
						</div>
						<span class="progress">
                        </span>
					</div>
					<em class="hint R">
                </em>
					<a id="RightRotate"  class="layui-btn layui-btn-normal" href="javascript:;">
                        向右旋转
                        <em>
                        </em>
                </a>
				  </div>
				  <div class="layui-form-item">
					<p class="Psava">
						<a id="againIMG" class="layui-btn layui-btn-normal"  href="javascript:;">重新选择</a>
						<a id="saveShear" class="layui-btn layui-btn-normal"  href="javascript:;">保存截图</a>
					</p>
				  </div>
				</form>
				</div>
				<!--工具条结束-->
			</div>
			<!--primary范围结束-->
			<div style="clear: both"></div>
		</div>
		<!--shearphoto_main范围结束-->
</div>

              
          
<script src="shearphoto_common/layui/layui.js" charset="utf-8"></script>
<script>
layui.link('shearphoto_common/css/ShearPhoto.css');
//设置图片上传路径 图片裁剪大小
setCropConfig();
var $,layer;
layui.use('form', function(){
  var $ =layui.jquery;
  var form = layui.form();
  form.on('select(changeFree)', function(data){
  Shear.SetProportional(parseFloat(data.value));
}); 
});

</script>

</body>
</html>